<template>
	<view class="templatePage">
		<!-- <view class="title">活动贡献</view> -->
		<view class="screenBox">
			<!-- <picker @change="activityChange" range-key="activityName" :range="activityArr">
				<view class="selectActivity">
					<text style="margin-right: 8rpx;">选择活动</text>
					<u-icon name="arrow-down" size="16"></u-icon>
				</view>
			</picker> -->
			<u-dropdown ref="uDropdown">
				<u-dropdown-item v-model="activityId" title="选择活动">
					<scroll-view scroll-y="true" :style="{height:windowHeight+'rpx',background:'#fff',overflow:'hidden'}">
						<block class="" v-for="(item,index) in activityArr" :key="index">
							<view class="activity_item" :class="showMark==index?'acvive_item':''" @click="activityChange(item.value,index)">
								<text>{{item.label}}</text>
								<u-icon name="checkbox-mark" v-if="showMark==index" size="16" color="#3B86FC"></u-icon>
							</view>
						</block>
					</scroll-view>
				</u-dropdown-item>
			</u-dropdown>
			<view></view>
		</view>
		<view class="dayScreen">
			<view :class="['dayItem', archivingCycle == '30' ? 'selectDay' : '']" @click="archivingCycle = '30'">
				近30天
			</view>
			<view :class="['dayItem', archivingCycle == '180' ? 'selectDay' : '']" @click="archivingCycle = '180'">
				近180天
			</view>
		</view>
		<view class="statisticBox">
			<view class="statisticItem">
				<text>{{ resData.addClueCount || 0}}</text>
				<view>新增唯一线索量</view>
			</view>
			<view class="line"></view>
			<view class="statisticItem">
				<text>{{ resData.heatingClueCount || 0}}</text>
				<view>加热线索量</view>
			</view>
		</view>

		<view class="qiun-charts">
			<e-charts :option="activityCharts" style="height: 590rpx;"></e-charts>
		</view>
	</view>
</template>

<script>
	import eCharts from'@/components/echarts/echarts.vue'
	import {
		getAppActivities,
		getActivityByDealerId,
		getActivityByAreaId,
		getActivityByGroupId
	} from '@/service/api/api.js';
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	var canvaColumn = null;
	
	export default {
		props: {
			// clueId: {
			// 	type: String,
			// 	default: ''
			// }
		},
		components: {
			uniIcons,
			eCharts
		},
		data() {
			return {
				showMark:"",
				userInfo: {},
				windowHeight:'',
				activityArr: [],
				activityId:'',
				archivingCycle: '30',
				resData: {},
				activityCharts:{},
				chartData: {
					// "categories": ["2013", "2014"],
					// "series": [{
					// 	"name": "类别一",
					// 	"data": [35, 36, 31, 33, 13, 34, 40, 50]
					// }, {
					// 	"name": "类别二",
					// 	"data": [18, 27, 21, 24, 6, 28, 30, 40]
					// }]
				}
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		created(){
			uni.getSystemInfo({
			    success:  (res)=> {
			      //  console.log(res.windowHeight,'----当前屏幕高度');
				 //  console.log((res.windowHeight - 250)*2)
					this.windowHeight=(res.windowHeight - 250)*2
			    }
			});
		},
		watch: {
			archivingCycle(newVal) {
				this.init()
			}
		},
		mounted() {
			this.userInfo = uni.getStorageSync('user_info')
			this.getActivities()
			this.init()
			
		},
		methods: {
			init() {
				if(this.userInfo.role == '143' || this.userInfo.role == '144') {
					this.getStoreChartData()
				} else if(this.userInfo.role == '139' || this.userInfo.role == '129') {
					this.getAreaChartData()
				}
			},
			labelFormatter (params) {
				 if (params.value > 0) {
				   return params.value;
				 } else {
				   return '';
				 }
			},
			getStoreChartData(){
				getActivityByDealerId({
					dealerId: this.userInfo.dealerId || '',
					archivingCycle: this.archivingCycle
				}).then(res => {
					if(res.data.code == '0') {
						let categories = []
						let series = [{
							"name": "新建唯一线索量",
							"type":"bar",
							stack: 'total',
							label: {
								show: false
							},
							emphasis: {
								focus: 'series'
							},
							"data": []
						}, {
							"name": "加热线索量",
							"type":"bar",
							stack: 'total',
							emphasis: {
								focus: 'series'
							},
							"data": [],
							label: {
								show: false
							  }
						},
						{
							name:'合计',
							type:'bar',
							stack:'total',
							show:true,
							 barMinHeight:'20',
							 barMaxHeight:'20',
							itemStyle:{						
								opacity:'0',							
							},
							label: {
								show: true,
								stack: 'total',
								offset:[0,0],
								align: 'left',
								opacity:'1'		
							},
							'data':[]  
						}]
						var fun = function (params) {
						var datavalue = 0;
						for (var i = 0; i < series.length; i++) {
							datavalue += series[i].data[params.dataIndex]
						  }
						  return datavalue;
						}
						series[series.length - 1]["label"]["formatter"] = fun;
						res.data.data.activityList.forEach((item, idx) => {
							categories.push(item.activityType)
							series['0'].data.push(item.addClueCount || '')
							series['1'].data.push(item.heatingClueCount || '');
							let num=item.addClueCount+item.heatingClueCount;
							series['2'].data.push(num)	
						})
						this.chartData = {
							categories,
							series
						}
						this.resData = {
							addClueCount: res.data.data.addClueCount,
							heatingClueCount: res.data.data.addClueCount
						}
						
						// console.log(this.chartData)
						 this.showCharts(this.chartData)
						//this.showColumnColumn("canvasChart", this.chartData);
					}
				})
			},
			
			async getAreaChartData(){
				let res = null
				if(this.userInfo.role == '139') {
					res = await getActivityByAreaId({	//大区总
						areaId: this.userInfo.userDeptId || '',
						archivingCycle: this.archivingCycle
					})
				} else if(this.userInfo.role == '129') {	//集团总
					res = await getActivityByGroupId({
						groupId: this.userInfo.userDeptId || '',
						archivingCycle: this.archivingCycle
					})
				} else if(this.userInfo.role == '155') {
					if (this.userInfo.userDeptId == this.userInfo.deptId && this.userInfo.deptLevel == '30') {
						res = await getActivityByGroupId({
							groupId: this.userInfo.userDeptId || '',
							archivingCycle: this.archivingCycle
						})
					} else {
						res = await getActivityByAreaId({	//大区总
							areaId: this.userInfo.userDeptId || '',
							archivingCycle: this.archivingCycle
						})
					}
				}

				if(res.data.code == '0') {
					let categories = []
					let series = [{
						"name": "新建唯一线索量",
						"type":"bar",
						stack: 'total',
						label: {
							show: false
						},
						emphasis: {
							focus: 'series'
						},
						"data": []
					}, {
						"name": "加热线索量",
						"type":"bar",
						stack: 'total',
						emphasis: {
							focus: 'series'
						},
						"data":[],
						label: {
							show: false,
							position: 'right',
							offset:[12,0],
							fontSize:16,
							color: 'black'
						  }
					},
					{
						name:'合计',
						type:'bar',
						stack:'total',
						show:true,
						 barMinHeight:'20',
						 barMaxHeight:'20',
						itemStyle:{						
							opacity:'0',							
						},
						label: {
							show: true,
							stack: 'total',
							offset:[0,0],
							align: 'left',
							opacity:'1'		
						},
						'data':[]  
					}]
					var fun = function (params) {
						//console.log(params)
						var datavalue = 0;
						for (var i = 0; i < series.length; i++) {
							datavalue += series[i].data[params.dataIndex]
						  }
						  return datavalue;
					}
					series[series.length - 1]["label"]["formatter"] = fun;
					res.data.data.activityAreaList.forEach((item, idx) => {
						categories.push(item.activityType)
						series['0'].data.push(item.addClueCount || '')
						series['1'].data.push(item.heatingClueCount || '')
						let num=item.addClueCount+item.heatingClueCount;
						series['2'].data.push(num)	
					})
					this.chartData = {
						categories,
						series
					}
					this.resData = {
						addClueCount: res.data.data.addAreaClueCount,
						heatingClueCount: res.data.data.heatingAreaClueCount
					}
					
					//console.log(this.chartData)
					this.showCharts(this.chartData)
				//	this.showColumnColumn("canvasChart", this.chartData);
				}
			},
			showCharts(data){
				
				this.activityCharts={
					 color:['#53CB88','#5574E0'],
					 tooltip: {
					        trigger: 'axis',
					        axisPointer: {            // Use axis to trigger tooltip
					            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
					        }
					    },
					    legend: {
					        data: ['新建唯一线索量', '加热线索量'],
							left:"0",
							icon: "circle",
							itemGap: 10,
							itemWith:6,
							itemHeight:6
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type: 'value',
							position:'top'
					    },
					    yAxis: {
					        type: 'category',
					        data: data.categories,
							axisLine: {show:false}
					    },
					    series: data.series
				}
			},

			getActivities() {
				getAppActivities({}).then(res => {
					if (res.data.code == 0) {
						this.activityArr = res.data.data.map(item => {
							return {
								//activityId: item.activityId,
								//activityName: item.activityName,
								// firstChannelId: item.firstChannelId,
								// secondChannelId: item.secondChannelId
								label:item.activityName,
								value:item.activityId
							}
						}) || []
					}
				})
			},
			
			activityChange(value,index) {
				this.showMark=index;
				//let index = e.target.value
			    //let activityObj = this.activityArr[index]
				uni.navigateTo({
					url: "/pages/reportForm/activityDetailsForm/index?activityId="+value
				})
				this.$refs.uDropdown.close();
			},

		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>
<style>
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

</style>